import { Text, View, getLaunchOptionsSync } from '@ray-js/ray'; // 导入基础 UI 组件
import React from 'react';

// 导入本地PNG图片
import { Icon } from '@ray-js/smart-ui';
import flameOffIcon from '../../res/imgs/ic_main_flame_off.png';
import flameOnIcon from '../../res/imgs/ic_main_flame_on.png';
import heatOffIcon from '../../res/imgs/ic_main_heat_off.png';
import heatOnIcon from '../../res/imgs/ic_main_heat_on.png';
import powerOffIcon from '../../res/imgs/ic_main_off.png'; //ic_main_on
import powerOnIcon from '../../res/imgs/ic_main_on.png'; //
import timerIcon from '../../res/imgs/ic_main_timer_off.png';
import timerOnIcon from '../../res/imgs/ic_main_timer_on.png';
import styles from './index.module.less'; // 引入模块化样式

import Strings from '@/i18n';
import { useActions, useProps } from '@ray-js/panel-sdk';
// 图标按钮组件
const IconButton = ({ icon, text, onClick, id }) => (

  <View
    hoverClassName={styles.pressed}
    hoverStayTime={5}
    id={id}
    onClick={onClick}
    className={styles.col}
    style={{
      width: '100%',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      textAlign: 'center'
    }}
  >
    <Icon
      name={icon}
      size="100rpx"
    />
    <Text className={styles.title} style={{ marginTop: '5rpx' }}>{text}</Text> {/* 显示页面标题 */}
  </View>
);

//    actions.Flame_Set.set("ab11aadf07abdb77abdb7af6df6df600"),如果是透传数据，发什么就会上报什么，但是要十六进制
// 图标按钮行组件
export function IconButtonCol() {
  const power = useProps(props => props.Power_Switch);//总开关
  const flame = useProps(props => props.light);//火焰开关
  const heat = useProps(props => props.switch);//加热开关
  const downTime = useProps(props => props.countdown_left); // 倒计时剩余时间，单位S,数值0-86400
  const actions = useActions();
  console.log('power:', power);
  const {
    query: { deviceId
    }
  } = getLaunchOptionsSync();
  console.log('设备ID:', deviceId); // 打印设备ID


  /**
   * 开启或关闭定时
   */
  const switchTime=()=>{
    if(downTime==0){//已经关闭了，就默认设置2小时的定时
        actions.DownTimer_Set.set(120);
    }else{//定时还没执行完，此时去关闭
 actions.DownTimer_Set.set(0);
    }
  }

  // 按钮配置数组
  const buttonConfig = [
    {
      icon: power ? powerOnIcon : powerOffIcon,
      text: Strings.getLang('m_power'),
      onClick: () => {
        console.log('开关按钮被点击1');
        actions.Power_Switch.toggle();
        // actions.Power_Switch.off()
        console.log('开关按钮被点击6');
        // publishDps({
        //   deviceId,
        //   dps: { 101: false },
        //   mode: 1,
        //   pipelines: [0, 1, 2, 3, 4, 5, 6],
        //   options: {},
        //   success: (res) => {
        //     console.log('publishDps-发送成功-success', res);
        //   },
        //   fail: (error) => {
        //     console.log('publishDps-发送失败-fail', error);
        //   }
        // });
      },
      id: 'power-button'
    },
    {
      icon: flame ? flameOnIcon : flameOffIcon,
      text: Strings.getLang('m_flame'),
      onClick: () => {
        console.log('火焰按钮被点击')
        actions.light.toggle();
      },
      id: 'flame-button'
    },
    {
      icon: heat ? heatOnIcon : heatOffIcon,
      text: Strings.getLang('m_heat'),
      onClick: () => {
        console.log('加热按钮被点击')
        actions.switch.toggle();
      },
      id: 'heat-button'
    },
    {
      icon: downTime > 0 ? timerOnIcon : timerIcon,
      text:  Strings.getLang('m_timer'),
      onClick: () => {
        switchTime();
      },
      id: 'timer-button'
    }
  ];
  return (
    <View className={styles.view} >
      {buttonConfig.map(button => (
        <IconButton key={button.id} {...button} />
      ))}
    </View>
  );
}

export default IconButtonCol;    